<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <div id="app">
      <!-- HTML中书写逻辑 -->
      <div>HTML：{{obj.count % 2 === 0 ? '偶数' : '奇数'}}</div>
      <!-- 计算属性响应式书写复杂逻辑 -->
      <div>computed：{{computedFunc}}</div>
      <button @click="obj.count++">{{obj.count}}</button>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      data() {
        return {
          obj: {
            count: 0
          },
          firstName: 'John',
          lastName: 'Doe'
        };
      },
      computed: {
        now() {
          // this.now不依赖于任何数据，所以this.now永远不会更新，直接取缓存
          return Date.now();
        },
        computedFunc() {
          // Vue会检测到this.computedFunc依赖于this.obj.count，所以当this.obj.count更新时this.computedFunc也会更新，否则取缓存
          return this.obj.count % 2 === 0 ? '偶数' : '奇数';
        },
        fullName: { // 计算属性默认是只读的，可同时提供getter和setter创建可写属性，不建议这么做
          get() { // 执行this.fullName时get被调用
            return this.firstName + ' ' + this.lastName;
          },
          set(newValue) { // 执行this.fullName='XXX YYY'时set被调用
            [this.firstName, this.lastName] = newValue.split(' ');
          }
        }
      }
    }).mount('#app');
  </script>
</html>